// cover some element-ui styles

/**
* 改变element主题
* 配置参数参考 '\node_modules\element-plus\theme-chalk\src\common\var.scss'
*/
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: ('primary': ('base': $mainColor ),
    'success': ('base': $succssesColor ),
    'error': ('base': $errorColor ),
    'warning': ('base': $warningColor ),
  ),
  $text-color: ('primary': $primaryTextColor,
    'regular': $regularTextColor,
    'secondary': $secondaryTextColor,
    'placeholder': #C0C4CC,
  ),
  $button: ('hover-border-color': var(--el-border-color),
  ),
  $input: ('hover-border-color': var(--el-border-color),
  ),
  $select: ('border-color-hover': var(--el-border-color),
  ),
  $table: ('header-bg-color': #F5F7FA,
  ),
  $table-padding: ('default': 12px 0,
  ),
);

@use 'element-plus/theme-chalk/src/index.scss' as *;

// button
.el-button+.el-button,
.button-input+.el-button,
.el-button+.button-input {
  margin-left: 16px;
}

.el-button--success.is-plain {
  --el-button-text-color: var(--el-color-primary);
  --el-button-bg-color: var(--el-color-success-light-9);
  --el-button-border-color: var(--el-color-success-light-9);
  // --el-button-hover-text-color: var(--el-color-white);
  // --el-button-hover-bg-color: var(--el-color-success);
  // --el-button-hover-border-color: var(--el-color-success);
  // --el-button-active-text-color: var(--el-color-white);
}

.el-button.is-text {
  color: $mainColor;

  &:hover {
    color: $highlightColor;
  }

  &:hover,
  &:active,
  &:focus {
    background: transparent !important;
  }
}

.el-breadcrumb {
  padding: $gutterSmall $gutterLarge;
  font-size: 12px;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 15vh auto 0;
}

.el-dialog__footer {
  text-align: center;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// 查询表单样式
.el-form {
  .el-input-number.is-without-controls {
    width: 100%;

    .el-input__inner {
      text-align: left;
    }
  }

  // 表单内下拉框宽度百分百
  .el-select {
    width: 100%;
  }
}

.el-form-item__label {
  font-weight: normal;
}

// 客户信息管理-地址下拉
.el-form-item.address-item {
  .el-form-item__content {
    margin-left: 0 !important;

    .el-select {
      width: 100%;
    }
  }
}

// tabel
.el-table__body {
  .el-button.is-text {
    padding: 2px;
  }

  .el-button+.el-button {
    margin-left: 6px;
  }

  .svg-icon {
    font-size: 18px;
    font-weight: normal;
    color: #707070;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;
    }
  }

  .svg-icon+.svg-icon,
  .custom-tooltip-icon+.custom-tooltip-icon {
    margin-left: 12px;
  }
}

// tabs
.el-tabs__header {
  display: inline-block;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: $highlightColor;
}

// radio
.el-radio-button {
  .el-radio-button__inner {
    // min-width: 87px;
  }

}

// el-input 数字型去掉上下按钮
.el-input {

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  input[type='number'] {
    -moz-appearance: textfield !important;
  }
}

// el-input 复合输入框
// .el-input-group__append {
//   padding: 0 5px;
// }

// scrollbar
$scrollbarSize: 8px;

.el-scrollbar__bar.is-vertical {
  width: $scrollbarSize;
}

.el-scrollbar__bar.is-horizontal {
  height: $scrollbarSize;
}

/* 抽屉样式统一修改 start */
.el-drawer__body {
  padding: 0 28px 0 36px;
}
.el-drawer__header {
  padding: 32px 28px 0 36px;
}
.el-drawer__footer {
  padding-left: 36px;
  padding-right: 28px;
}
/* 抽屉样式统一修改 end */

// 描述列表
.el-descriptions {
  .is-bordered {
    .el-descriptions__label.is-bordered-label {
      width: 10%;
      min-width: 180px;
      background-color: #F5F7FA;
      font-weight: normal;
      color: $primaryTextColor;
    }
    .el-descriptions__content{
      // min-width: 10vw;
      height: 48px;
      color: $regularTextColor;
    }
  }
}